import './daily_charges_table.scss'

import { useEffect, useState } from 'react';
import { Form, Input, Select, Message, Button, Space, Table, DatePicker } from '@arco-design/web-react';

import { getDailyList, getStatisticsParking, searchDailyConditional } from '../../../../../../utils/api'


const DailyChargesTable = () => {
    //Form
    const FormItem = Form.Item;
    //---选择框
    const Option = Select.Option;
    //停车场
    const [parking_lot_options,setParkingLotOptions] = useState([]);

    //Table

    // 基本信息---------序号、日期、停车场、收费员、车流量
    // 收费来源---------岗享、公众号、APP、长期月租、
    // 支付方式---------微信、支付宝、现金、其它、ETC
    // 收费情况---------应收、实收
    const columns = [
        {
          title:'基本信息',        
          children:[
            {
                title:'序号',
                dataIndex:'key'
            },
            {
                title:'日期',
                dataIndex:'time'
            },
            {
                title:'停车场',
                dataIndex:'parkingName'
            },
            {
                title:'收费员',
                dataIndex:'userName'
            },
            {
                title:'车流量',
                dataIndex:'carNum'
            },
          ],
        },
        {
          title: '收费来源',
          children: [
            {
              title: '岗亭',
              dataIndex: 'sentryBox',
            },
            {
              title: '公众号',
              dataIndex: 'account',
            },
            {
              title:'APP',
              dataIndex: 'appmoney',
            },
            {
              title:'长期月租',
              dataIndex: 'vipMoney'
            },
            {
              title:'其他',
              dataIndex: 'otherMoney'
            }
          ],
        },
        {
          title: '支付方式',
          children: [
            {
              title: 'ETC',
              dataIndex: 'etcMoney'
            },
            {
              title:'微信',
              dataIndex:'wxMoney'
            },
            {
              title:'支付宝',
              dataIndex:'alipay'
            },
            {
              title:'现金',
              dataIndex:'cash'
            },
          ],
        },
        {
          title: '收费情况',
          children:[
            {
              title:'应收',
              dataIndex: 'totalIncome',
            },
            {
              title:'实收',
              dataIndex: 'totalFactIncome',
            }
          ],
          fixed: 'right',
          width: 120,
        },
      ];
    const [data,setData] = useState([])

      // 请求

      // 日收费报表列表getDailyList
      const myGetDailyList = () => {
        // getDailyList(
        //   {
        //     parkingId:1
        //   }
        // ).then(res => {
        //   console.log('日收费报表列表',res.result);
        //   setData(res.result)
        // })
      }

      // 停车场下拉框getStatisticsParking
      const myGetStatisticsParking = () => {
        // getStatisticsParking().then(res => {
        //   console.log('停车场下拉框',res.result);
        //   setParkingLotOptions(res.result)
        // })
      }

      // 日收费报表条件查询searchDailyConditional
      const mySearchDailyConditional = () => {
        // searchDailyConditional(
        //   // {
        //     // _start:'2022-06-29',
        //     // parkingId:1
        //   // }
        // ).then(res => {
        //   console.log('日收费报表条件查询',res.result);
        // })
      }

      // 表单数据
      const [searchData,setSearchData] = useState([])

      const onValuesChange = (changeValue, values) => {
        console.log('onValuesChange: ', values);
        setSearchData(values)
      };

      //查询
      const searchBtn = () => {
        console.log('查询传后端数据:',searchData);
        // 条件查询场内停车记录报表
        // mySearchDailyConditional(searchData).then(res => {
        //     console.log('多条件查询场内停车记录报表',res.result);
        // })
      }

      useEffect(()=>{
        myGetDailyList()
        myGetStatisticsParking()
        mySearchDailyConditional()
      },[])
    return <>
        <div className='daily_charges_form'>
            <Form 
              layout='inline' 
              className='parking_record_form'
              onValuesChange={onValuesChange}
            >
                <FormItem label='查询时间' field='_start'>
                  <DatePicker />
                </FormItem>

                <FormItem label='停车场' field='parkingId'>
                    <Select
                        placeholder='请选择'
                        style={{ width: 90 }}
                        onChange={(value) =>
                          Message.info({
                              content: `You select ${value}.`,
                              showIcon: true,
                          })
                        }
                        options={parking_lot_options}
                    >
                  </Select>
                </FormItem>

                {/* 查询重置 */}
                <FormItem>
                    <Space>
                        <Button type='primary' onClick={searchBtn}>查询</Button>
                        <Button type='primary'>重置</Button>      
                    </Space>
                </FormItem>

                {/* 导出 */}
                <FormItem className='parking_record_form_export'>
                    <Space>
                        <Button type='outline'>导出Excel</Button>      
                    </Space>
                </FormItem>

            </Form>

            
        </div>
        <div className='daily_charges_table'>
            <Table
                scroll={{
                    x: 1200,
                }}
                border={{
                    wrapper: true,
                    cell: true,
                }}
                columns={columns}
                data={data}
            />
        </div>
    </>
}

export default DailyChargesTable